{% load static %}
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务管理</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .task-list {
            margin-top: 20px;
        }
        .task-item {
            margin: 10px 0;
        }
        .task-item input {
            margin-right: 10px;
        }
    </style>
</head>
<body>

    <h1>任务管理</h1>

    <!-- 表单提交新任务 -->
    <div>
        <h3>添加新任务</h3>
        <form id="taskForm">
            <label for="title">任务标题：</label>
            <input type="text" id="title" name="title" required><br><br>

            <label for="description">任务描述：</label>
            <textarea id="description" name="description"></textarea><br><br>

            <button type="submit">添加任务</button>
        </form>
    </div>

    <!-- 任务列表 -->
    <div class="task-list">
        <h3>任务列表</h3>
        <ul id="taskList">
            <!-- 任务项将通过JavaScript动态插入 -->
        </ul>
    </div>

    <script>
        // 获取任务列表
        function fetchTasks() {
            fetch('/api/tasks/')
                .then(response => response.json())
                .then(data => {
                    const taskList = document.getElementById('taskList');
                    taskList.innerHTML = '';  // 清空现有的任务列表
                    data.forEach(task => {
                        const li = document.createElement('li');
                        li.className = 'task-item';
                        li.innerHTML = `
                            <input type="checkbox" ${task.completed ? 'checked' : ''} disabled>
                            ${task.title} - ${task.description}
                        `;
                        taskList.appendChild(li);
                    });
                });
        }

        // 提交新任务
        document.getElementById('taskForm').addEventListener('submit', function(event) {
            event.preventDefault();

            const title = document.getElementById('title').value;
            const description = document.getElementById('description').value;

            // 发送POST请求创建新任务
            fetch('/api/tasks/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    title: title,
                    description: description,
                    completed: false,
                }),
            })
            .then(response => response.json())
            .then(data => {
                // 清空表单输入框
                document.getElementById('taskForm').reset();
                // 重新获取并显示任务列表
                fetchTasks();
            })
            .catch(error => {
                console.error('Error:', error);
            });
        });

        // 页面加载时获取任务列表
        window.onload = function() {
            fetchTasks();
        };
    </script>
    <img src="{% static 'img/zz.jpg' %}" alt="">
</body>
</html>
